<template>
  <view class="test-page">
    <view class="header">
      <text class="title">订单详情测试</text>
      <text class="subtitle">测试不同订单类型的详情显示</text>
    </view>
    
    <view class="test-buttons">
      <button class="test-btn express" @click="testExpressOrder">
        测试快递代取订单
      </button>
      
      <button class="test-btn takeout" @click="testTakeoutOrder">
        测试外卖代取订单
      </button>
    </view>
    
    <view class="order-preview" v-if="currentOrder">
      <view class="preview-header">
        <text class="preview-title">当前订单预览</text>
        <text class="order-type">{{ getServiceTypeText(currentOrder.serviceType) }}</text>
      </view>
      
      <view class="preview-content">
        <view class="preview-item">
          <text class="label">订单ID:</text>
          <text class="value">{{ currentOrder.orderId }}</text>
        </view>
        <view class="preview-item">
          <text class="label">服务类型:</text>
          <text class="value">{{ getServiceTypeText(currentOrder.serviceType) }}</text>
        </view>
        <view class="preview-item">
          <text class="label">订单金额:</text>
          <text class="value">¥{{ currentOrder.totalAmount }}</text>
        </view>
      </view>
      
      <button class="view-detail-btn" @click="viewOrderDetail">
        查看完整详情
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 声明全局uni对象
declare const uni: any

// 当前测试订单
const currentOrder = ref<any>(null)

// 测试快递代取订单
const testExpressOrder = () => {
  currentOrder.value = {
    id: 1,
    orderId: 'EXP' + Date.now(),
    serviceType: 'express',
    time: '今日 14:00',
    address: '宿舍楼A栋',
    contactInfo: '请小心轻放',
    pickup: '西院快递点',
    delivery: '宿舍楼A栋',
    image: '',
    customerName: '张三',
    customerPhone: '13800138000',
    extraAmount: '2',
    totalAmount: '7',
    orderTime: new Date().toLocaleString(),
    status: 'available',
    // 快递代取特有字段
    deliveryLocation: '宿舍楼A栋',
    deliveryTime: '今日,立即送出',
    baseFee: 5,
    tipAmount: 2,
    items: [
      {
        size: '小(美瞳/手机壳)左右',
        pickupCode: '1234',
        pickupLocation: '西院篮球场(第三食堂)',
        price: 2.00
      }
    ],
    hasMoreRequirements: false,
    specialNote: '请小心轻放'
  }
  
  uni.showToast({
    title: '快递代取订单已加载',
    icon: 'success'
  })
}

// 测试外卖代取订单
const testTakeoutOrder = () => {
  currentOrder.value = {
    id: 2,
    orderId: 'TAK' + Date.now(),
    serviceType: 'takeout',
    time: '今日 18:00',
    address: '教学楼1号',
    contactInfo: '不要辣椒',
    pickup: '黄焖鸡米饭店',
    delivery: '教学楼1号',
    image: '',
    customerName: '李四',
    customerPhone: '13900139000',
    extraAmount: '2',
    totalAmount: '5',
    orderTime: new Date().toLocaleString(),
    status: 'available',
    // 外卖代取特有字段
    selectedTime: '今日，18:00-18:30',
    orderDetail: '一份黄焖鸡米饭，一份可乐，不要辣椒',
    basePrice: 3,
    tipAmount: 2
  }
  
  uni.showToast({
    title: '外卖代取订单已加载',
    icon: 'success'
  })
}

// 获取服务类型文本
const getServiceTypeText = (serviceType: string): string => {
  const typeMap = {
    'express': '快递代取',
    'takeout': '外卖代取'
  }
  return typeMap[serviceType] || '未知服务'
}

// 查看订单详情
const viewOrderDetail = () => {
  if (!currentOrder.value) {
    uni.showToast({
      title: '请先选择订单类型',
      icon: 'none'
    })
    return
  }
  
  // 将订单数据存储到本地存储，供详情页面读取
  uni.setStorageSync('testOrderDetail', currentOrder.value)
  
  uni.navigateTo({
    url: `/pages/JJK/order-detail?id=${currentOrder.value.id}&test=true`
  })
}
</script>

<style lang="scss" scoped>
.test-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40px;
  
  .title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10px;
  }
  
  .subtitle {
    font-size: 16px;
    color: #666;
  }
}

.test-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
  
  .test-btn {
    height: 60px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    
    &.express {
      background: linear-gradient(135deg, #4CAF50, #45a049);
    }
    
    &.takeout {
      background: linear-gradient(135deg, #FF9800, #F57C00);
    }
  }
}

.order-preview {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .preview-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
    
    .order-type {
      font-size: 14px;
      color: #666;
      padding: 4px 12px;
      background: #f0f0f0;
      border-radius: 20px;
    }
  }
  
  .preview-content {
    margin-bottom: 20px;
    
    .preview-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      
      .label {
        font-size: 14px;
        color: #666;
      }
      
      .value {
        font-size: 14px;
        color: #333;
        font-weight: 500;
      }
    }
  }
  
  .view-detail-btn {
    width: 100%;
    height: 50px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
